<template>
  <!-- 全局配置 主题 -->
  <nut-config-provider :theme="theme">
    <!-- 状态栏 -->
    <view :style="`width:100%;height:${globalStore.statusBarHeight}px;`"></view>
    <!-- 顶部导航栏 -->
    <!-- <nut-navbar title="Title" fixed placeholder safe-area-inset-top z-index="9999"></nut-navbar> -->
    <!-- 中间页面 -->
    <!-- <router-view /> -->

    <Home></Home>
    <!-- <component :is="AsyncComponent"></component> -->
    <!-- <component :is="component"></component> -->
    <!-- 底部导航栏 -->
    <nut-tabbar :v-model="active" 
    bottom safe-area-inset-bottom placeholder
    @tab-switch="tabSwitch"
    :unactive-color="tabBarConfig.unactiveColor" 
    :active-color="tabBarConfig.activeColor">
      <nut-tabbar-item v-for="(item, index) in tabBarItemList" :key="index" 
      :tab-title="item.title"
      :href="item.href"
      :value="item.value"
      >
        <template #icon="props">
          <img :src="props.active ? item.iconSelected : item.icon" alt="" />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
  </nut-config-provider>
</template>
 
<script setup>
import { tabBarConfig, tabBarItemList } from './constants'
import Taro from '@tarojs/taro';
import { useGlobalStore } from '@/stores/global';
import { onMounted } from 'vue';
import http from '@/utils/http'
import Home from '@/pages/tabBar/home.vue';

// const component = computed(() => {
//   return import('@/pages/tabBar/home.vue');
// });

// const component = import('@/pages/tabBar/home.vue');

import { defineAsyncComponent } from 'vue'

// const AsyncComponent = defineAsyncComponent(() =>
//   import('@/pages/tabBar/home.vue')
// )

// const globalStore = useGlobalStore();
const globalStore = useGlobalStore();
onMounted(() => {
  // let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
  // let systemInfo = ft.getSystemInfoSync();
  // console.log(menuButtonObject)
  // const appStore = useAppStore();
  Taro.getSystemInfo({
    success: res => {
      globalStore.statusBarHeight = res.statusBarHeight
      // globalStore.initializeGlobal({
      //   statusBarHeight: res.statusBarHeight,
      //   navTop: menuButtonObject.top,
      //   navHeight: statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2,
      //   windowHeight: res.windowHeight
      // });
      // this.statusBarHeight = res.statusBarHeight;
      // this.navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
      // this.navHeight = this.statusBarHeight + menuButtonObject.height + (menuButtonObject.top - this.statusBarHeight)*2;//导航高度
      // this.windowHeight = res.windowHeight;
      console.log(globalStore.statusBarHeight) 
    },
    fail(err) {
      console.log(err);
    }
  })
})
 
const theme = '';
const active = 0;
 
// const router = useRouter()
function tabSwitch(item, index) {
  http.get('/api/user/1').then(res => {
    console.log(res);
  }).catch(error => {
    console.log(error);
  });
  
  // Taro.navigateTo({
  //   url: '/layouts/tabBar/mine'
  // })
  // const instance = Taro.getCurrentInstance();
  // if (instance) {
  //   let routerPath = instance.router ? instance.router.path : ''; // 根据环境不同，获取路径的方式可能有所不同
  //   console.log(routerPath)
  // }
  // router.push(item.href)
  // AsyncComponent = defineAsyncComponent(() =>
  //   import('@' + item.href + '.vue')
  // )
  // Taro.navigateTo({
  //   url: item.href
  // })
  console.log(item, index)
}
 
</script>